<template>
  <div>
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      showIndexColumn
      :customRow="customRow"
    >
      <template slot="index" slot-scope="text, record, index">
        <a-icon type="swap" :rotate="90"/>
        <span>{{index+1}}</span>
      </template>
      <template #action>
        <a-button type="link">删除</a-button>
      </template>
    </a-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      position:{
        start: 0,
        end: 0,
        sourceEl: null,
      },
      columns: [
        {
          title: '序号',
          scopedSlots: {customRender: 'index'}
        },
        {
          title: '网关名称',
          dataIndex: 'name',
        },
        {
          title: '网关编号',
          dataIndex: 'id',
        },
        {
          title: '适配产品',
          dataIndex: 'pKey',
        },
        {
          title: '实例数量',
          dataIndex: 'count',
        },
        {
          title: '操作',
          key: 'action',
          width: '88px',
          scopedSlots: { customRender: 'action' },
        },
      ],
      dataSource: [
        {
          "name": "网关A",
          "id": "000A",
          "pKey": "01,02,03",
          "count": 0
        },
        {
          "name": "网关B",
          "id": "000B",
          "pKey": "04",
          "count": 0
        },
        {
          "name": "网关C",
          "id": "000C",
          "pKey": "05,06",
          "count": 0
        },
        {
          "name": "监测系统网关",
          "id": "monitor-gw",
          "pKey": "eiot02,eiot03,eiot04",
          "count": 2
        }
      ]
    };
  },
  methods: {
  // 排序
  reorder({ start, end }) {
    console.log('676868', start, end);
    if (start !== undefined && end !== undefined) {
      if (start > end) {
        // 当开始大于结束
        let temp = this.dataSource[start];
        this.dataSource.splice(start, 1);
        this.dataSource.splice(end, 0, temp);
      } else if (start < end) {
        // 结束大于开始
        let temp = this.dataSource[start];
        this.dataSource.splice(start, 1);
        this.dataSource.splice(end + 1, 0, temp);
      }
      let arr = this.dataSource?.map(item => item.id);
      console.log('arr:',arr);
      // this.dataSource = [...arr]
    }
  },
  customRow(record, index) {
    console.log('record:',record,'index:',index);
    return {
      style: {
        cursor: 'move',
      },
      on:  {
        mouseenter: (event) => {
          // 兼容IE
          let ev = event || window.event;
          ev.target.draggable = true;
        },
        dragstart: (event) => {
          // debugger
          // 兼容IE
          let ev = event || window.event;
          // 阻止冒泡
          ev.stopPropagation();
          // 得到源目标数据;
          this.position.start = index;
          const tr = ev.target;
          this.position.sourceEl = tr;
        },
        dragover: (event) => {
          let ev = event || window.event;
          // 阻止默认行为
          ev.preventDefault();
        },
        drop: (event) => {
          let ev = event || window.event;
          // 阻止默认行为
          ev.preventDefault();
          this.position.end = index;
          this.reorder(this.position);
          this.animation(this.position);
        }
      },
    };
  },
  // 实现动画效果
  animation({ start, end, sourceEl }) {
    // 48 是每行的高度，也可以自动获取，根据情况而定
    let count = 48 * (start - end);
    sourceEl.style.translate = `0px ${count}px`;
    setTimeout(() => {
      sourceEl.style.transition = 'all 0.5s';
      sourceEl.style.translate = `0px 0px`;
    });
  }


  }
};
</script>
<style lang="less" scoped></style>
